<!doctype html> 
<html ng-app='text'> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
*{margin: 0;padding: 0;transition:0.5s all ease;}

.more{
	width: 300px;height: 50px;border: 1px solid black;line-height: 20px;
	overflow: hidden;
}
.more2{
	width: 300px;height: 250px;border: 1px solid black;line-height: 20px;
	overflow: hidden;
}


    </style>
    <script type="text/javascript" src='angular.js'></script>
    <script type="text/javascript">

    var app = angular.module('text',[]);
    app.controller('const',function ($scope){
    	$scope.licuan = true;
    });
    app.directive('leo',function (){
    	return {
    		'restrict':'E',
    		'template':'<div class={{licuan?"more":"more2"}}><a href="javascript:;" ng-click="licuan=!licuan">{{licuan?"显示更多":"隐藏"}}</a><p ng-transclude></p></div>',
    		'transclude':true,
    		'replace':true
    	}
    })
    </script>
</head>
<body ng-controller='const'>
<leo>
	开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈开心哈哈哈
</leo>
</body>
</html>